<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>积分兑换商城首页触屏版html5</title>
	<script src="/js/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="/css/shopcar.css"/>
	<link rel="stylesheet" type="text/css" href="/css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="/css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="/css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="/sourse/layer/mobile/need/layer.css">
	<link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
	<script src="/js/rem.js"></script>
	<script src="/js/plugins/jrender/jrender.js"></script>
	<script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/sourse/layer/mobile/layer.js"></script>
	<script type="text/javascript">

		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})

		$(function () {

		    var ids=[];//定义一个数组,装已经选中的商品id
			//从本地缓存获取用户对象
			var user = JSON.parse(sessionStorage.getItem("user"));
		    //根据用户id查该用户的购物车
			$.get("/shopCar/"+user.id,function (data) {
                console.log(data);
                $(".shoppingcar").renderValues({list:data}, {
                    handle: function (ele, value) {
                        //动态渲染a标签
                        $(ele).attr("href", "/mine/shopping/detail.html?id=" + value);
                        $(ele).attr("data-ids",value);
                    },
                    handleid:function (ele,value) {
						$(ele).attr("data-id",value);
                    }
                    
                });
            })

            $(".shoppingcar").on("click" ,' input[type="checkbox"]',function () {
                tatol();
            })

            $(".shoppingcar").on("click" ,'.deleteBtn',function () {
                var id = $(this).data("id");
                $.ajax({
                    type:"DELETE",
                    url:"/shopCar/"+id,
                    success:function (data) {
                        $(document).dialog({
                            type: "confirm",
                            style: "IOS",
                            content: "删除成功",
                            buttons: [
                                {
                                    name: "回到购物车",
                                    callback: function() {
                                        location.reload();
                                    }
                                }
                            ]
                        });
                    }
                })
            })
			var money;
            function tatol() { // 计算总积分

                var count = 0;
                $(".list").map(function(index, item) {
                    var $el = $(item);
                    if ($el.find('input[type="checkbox"]').is(":checked")) {
                        count += parseFloat($el.find('.money').html()) * parseInt($el.find('.num').html());
                    }
                });
                console.log(ids);
                if (count > 0) {
                    $('.settlement span').html(count + '积分');
                    money=count;
                } else {
                    $('.settlement span').html('');
                    money='';
				}
            }
			//立即结算
			$(".jiesuan").click(function () {
                $(".list").map(function(index, item) {
                    var $el = $(item);
                    if ($el.find('input[type="checkbox"]').is(":checked")) {
                        var a = $el.find("input[name='ids']").val();
                        ids.push(a)
                    }
                });
               sessionStorage.setItem("ids",JSON.stringify(ids));
               sessionStorage.setItem("money",money);
               sessionStorage.setItem("count",ids.length);
               sessionStorage.setItem("shopCar",JSON.stringify(1));
               if(ids.length!=0){
                   location.href = "/mine/shopping/confirm.html";
			   } else {
                   $(document).dialog({
                       type: "confirm",
                       style: "IOS",
                       content: "亲,请选择需要购买的商品",
                       buttons: [
                           {
                               name: "回到购物车",
                               callback: function() {
                                   location.href = "/mine/shopping/shopcar.html";
                               }
                           }
                       ]
                   });
			   }

            })
        })

	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<!--header star-->
		<header class="mui-bar mui-bar-nav" style="background-color: #4D4C4B" id="header">
			<a class="btn" href="javascript:history.go(-1)">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	        <h4>购物车</h4>
	    </header>
	    <!--header end-->
	    <!--商品目录-->

		<div class="warp warptwo clearfloat shoppingcar">
			<div class="shopcar clearfloat" render-loop="list">
				<div class="list clearfloat fl" id="product">
					<div class="xuan clearfloat fl">`
						<div class="radio" >
							<label>
								<input type="checkbox" name="sex" value="" />
							</label>
						</div>
					</div>
					<a href="javascript:void(0)">
						<a href="detail.html"  render-key="list.product.id" render-fun="handle">
							<div class="tu clearfloat fl">
								<span></span>
								<img render-src="list.product.productImg"/>
							</div>
						</a>
						<div class="right clearfloat fl">
							<p class="tit over" render-html="list.product.productName"></p>
							<p class="fu-tit over"  render-html="list.product.simpleInfo"></p>
							<p class="jifen over"><samp render-html="list.product.price" class="money" ></samp>积分</p>
							<input type="hidden" id="ids" name="ids" render-value="list.product.id">
							<div class="bottom clearfloat">
								<div class="zuo clearfloat fl">
									<ul>
										<p class="fu-tit over">数量:<samp render-html="list.count" class="num">1</samp></p>
									</ul>
								</div>
								<div>
								<i class="iconfont icon-lajixiang fr deleteBtn " render-key="list.product.id" render-fun="handleid"></i>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
	    
	    <!--settlement star-->
	    <div class="settlement clearfloat">
	    	<div class="zuo clearfloat fl box-s">
	    		合计：<span></span>
	    	</div>
	    	<a  class="fl db jiesuan ">
	    		立即结算
	    	</a>
	    </div>
	    <!--settlement end-->
	    
		<!--footer star-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="shopindex.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li class="active">
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->

		<script type="text/javascript">


		</script>
		
	</body>

</html>
